<template>
	<el-row class="tac">
		<el-col :span="3">
			<el-menu :default-active="active" class="el-menu-vertical-demo" @select="handleMenuSelect">
				<el-menu-item index="6" :disabled="requestParams.progressStage >= 6 ? false : true">
					<img v-if="index == '6'" src="@/assets/dg1.png" alt="" style="width: 21px; height: 21px; margin-right: 5px" />
					<img v-elsealt="" src="@/assets/dg0.png" style="width: 21px; height: 21px; margin-right: 5px" />

					<span>大纲编制</span>
				</el-menu-item>
				<el-menu-item index="7" :disabled="requestParams.progressStage >= 7 ? false : true">
					<!-- <el-icon><Tickets /></el-icon> -->
					<img v-if="index == '7'" src="@/assets/yj1.png" alt="" style="width: 21px; height: 21px; margin-right: 5px" />
					<img v-elsealt="" src="@/assets/yj0.png" style="width: 21px; height: 21px; margin-right: 5px" />
					<span>征求意见</span>
				</el-menu-item>
				<el-menu-item index="8" :disabled="requestParams.progressStage >= 8 ? false : true">
					<img v-if="index == '8'" src="@/assets/ss1.png" alt="" style="width: 20px; height: 20px; margin-right: 5px" />
					<img v-else alt="" src="@/assets/ss0.png" style="width: 20px; height: 20px; margin-right: 5px" />
					<span>送审阶段</span>
				</el-menu-item>
				<el-menu-item index="9" :disabled="requestParams.progressStage >= 9 ? false : true">
					<img v-if="index == '9'" src="@/assets/bp1.png" alt="" style="width: 20px; height: 20px; margin-right: 5px" />
					<img v-else alt="" src="@/assets/bp0.png" style="width: 20px; height: 20px; margin-right: 5px" />
					<span>报批阶段</span>
				</el-menu-item>
				<el-menu-item
					v-if="
						userStore.user.roleCode.includes('SHZJW') ||
						userStore.user.roleCode.includes('ZZADMIN') ||
						userStore.user.roleCode.includes('SHZZ') ||
						userStore.user.roleCode.includes('SYADMIN')
					"
					index="10"
					:disabled="requestParams.progressStage >= 10 ? false : true"
				>
					<img v-if="index == '10'" src="@/assets/fb1.png" alt="" style="width: 20px; height: 20px; margin-right: 5px" />
					<img v-else alt="" src="@/assets/fb0.png" style="width: 20px; height: 20px; margin-right: 5px" />
					<span>发布实施</span>
				</el-menu-item>
			</el-menu>
		</el-col>

		<el-col :span="20" class="rightkuai">
			<Dagang v-if="checkindex == '6'" :datainfo="list" :request-params="requestParams" @update-data="updateData" />

			<!-- 征求意见原 -->
			<Yijianone v-if="checkindex == '7'" :datainfo="list" :request-params="requestParams" @update-data="updateData" />
			<!-- 征求意见点了一建挂网  -->
			<!-- <Yijianonetwo v-if="checkindex == '2'" :datainfo="props.datainfo" :requestParams="requestParams" />  -->
			<Songshen v-if="checkindex == '8'" :datainfo="list" :request-params="requestParams" @update-data="updateData" />
			<!-- 送审第二种样式  -->
			<!-- <Songshentwo v-if="checkindex == '3'" />-->
			<Baopi v-if="checkindex == '9'" :datainfo="list" :request-params="requestParams" @update-data="updateData" />
			<Fabu v-if="checkindex == '10'" :datainfo="list" :request-params="requestParams" @update-data="updateData" />
		</el-col>
	</el-row>
</template>
<script setup lang="ts">
import { ref, watch, nextTick, defineProps, onMounted } from 'vue'

import { progressInfoApi } from '@/api/bianzhi/index'

import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
import Baopi from '../common/baopi.vue'
import Fabu from '../common/fabu.vue'
import Dagang from '../common/dagang.vue'
import Yijianonetwo from '../common/yijianonetwo.vue'
import Yijianone from '../common/yijianone.vue'
import Songshen from '../common/songshen.vue'

import Songshentwo from '../common/songshentwo.vue'
const emit = defineEmits<{ (event: 'updateData', value: ''): void }>()

const props = defineProps({
	datainfo: {
		type: Object,
		default: () => ({})
	}
})
const active = ref('6')
const list = ref({
	id: null,
	edit: null,
	porprogressStatus: null,
	progressStage: null,
	progressColor: null,
	isshen: null
})
const checkindex = ref('6')
watch(
	() => props.datainfo,
	(newVal: any, oldVal: any) => {
		list.value = newVal

		///	console.log(list.value, 'list.value')
	},
	{ immediate: true }
)
const requestParams = ref({} as any)

const isedit = ref(false)

onMounted(() => {
	///  console.log(props.datainfo,"sgsgsgsgwgwgw")
	progressInfoApi({ id: props.datainfo.id }).then(res => {
		requestParams.value = res.data

		active.value = res.data.progressStage
		checkindex.value = res.data.progressStage
	})
})

const updateData = val => {
	progressInfoApi({ id: props.datainfo.id }).then(res => {
		requestParams.value = res.data

		list.value.progressStage = res.data.progressStage
		list.value.porprogressStatus = res.data.progressStatus

		///	console.log(props.datainfo.progressStage, props.datainfo.porprogressStatus, 'sgsjjjojojojojojo')
	})
}

const handleMenuSelect = (item: string) => {
	console.log('menu item: ', item)
	checkindex.value = item
}
</script>

<style lang="scss" scoped>
.tac {
	height: calc(100vh - 212px);
}

.el-menu-vertical-demo {
	height: 100%;
}

.rightkuai {
	overflow-y: scroll;
	height: 100%;
	margin-left: 20px;

	&::-webkit-scrollbar {
		display: none;
	}
}
</style>
